<template>
  <h2>销售开发</h2>
  <el-form :model="sellForm" :rules="rules" ref="formRef" label-width="120px">
    <el-form-item label="客户名称" prop="custid" >

      <el-select
          v-model="sellForm.custid"
          class="m-2"
          placeholder="请选择客户"
          size="large"
          style="width: 80%"
      >
        <el-option
            v-for="item in custList"
            :key="item.id"
            :label="item.custName"
            :value="item.id"
        />
      </el-select>

    </el-form-item>
    <el-form-item label="销售渠道" prop="channelId">
      <el-select v-model="sellForm.channelId" placeholder="请选择渠道...." style="width: 80%">
        <el-option label="自媒体" value="0" />
        <el-option label="网络推广" value="1" />
        <el-option label="老客户介绍" value="2" />
        <el-option label="陌拜" value="3" />
        <el-option label="二次客户" value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="销售金额" prop="money">
      <el-input v-model="sellForm.money" style="width: 80%"/>
    </el-form-item>
    <el-form-item label="开发阶段" prop="nowStep">
      <el-select v-model="sellForm.nowStep" placeholder="请选择...." style="width: 80%">
        <el-option label="解除" value="解除" />
        <el-option label="报价" value="报价" />
        <el-option label="签约" value="签约" />
      </el-select>
    </el-form-item>
    <el-form-item label="业务员" prop="empId">
      <el-input v-model="sellForm.empId" style="width: 80%" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="subSellForm">保存</el-button>
      <el-button >取消</el-button>
    </el-form-item>
  </el-form>

</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import { request } from '../utils/request';
import {ElMessage} from "element-plus";
//定义销售过程表单
const sellForm=reactive({
  custid:'',
  channelId:'',
  money:0.0,
  nowStep:'',
  empId:''
});
const formRef = ref(null);
const rules={
  custid:[{
 required:true,message:"请选择客户名称",trigger:'blur'
  }],

  channelId:[{
 required:true,message:"请选择销售渠道",trigger:'blur'
  }],

  money:[{
 required:true,message:"请输入销售金额",trigger:'blur'
  }],

  nowStep:[{
 required:true,message:"请选择开发过程",trigger:'blur'
  }],

  empId:[{
 required:true,message:"请选择业务员编号",trigger:'blur'
  }]


};

//创建数组，封装客户信息
const custList=ref([]);




//页面挂在发送ajax请求，查询所有客户信息，填充下拉列表框
onMounted(function(){
  request({
    url: "http://localhost:8081/listAllCust",
    method: 'get'
  })
      .then((response)=>{
        custList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      });
});
/////////////////////////////////////////////////////////////////////////

//发送ajax请求，保存客户销售过程记录
function subSellForm(){
  formRef.value.validate((valid) => {
    if (!valid) return;
    request({
      url: "http://localhost:8081/saveSellJh",
      method: 'post',
      data: sellForm
    })
        .then((response)=>{
          if(response.data.code==200){
            ElMessage(response.data.msg);
            // 清空表单内容
            sellForm.custid = '';
            sellForm.channelId = '';
            sellForm.money = '';
            sellForm.nowStep = '';
            sellForm.empId = '';
          }else{
            ElMessage(response.data.msg);
          }
        })
        .catch((error)=>{
          console.log(error);
        });
  });
}

</script>

<style scoped>

</style>